﻿{extend name="layout/base" /}

{block name="meta"}
{__block__}
<style>
    .product-color-size-area .size-area {
        float: left;
        margin-right: 18px;
    }
    .col2-left-layout .product-color-size-area .size-area {
        width: 100%
    }

    /*商品评价*/
    .apprtime{color: #999;display: inline-block;margin:5px 0;}
    .appraise-head{width:100%; height:80px; display:flex; margin: 10px auto; }
    .appraise-head .text{font-size: 12px; color: #666; font-weight: 400; }
    .percent{line-height: 110%; font-size: 45px; color: #E4393C; font-family: arial; }
    .percent span {font-size: 23px; }
    .app-head-l{flex:1; height:80px;}
    .app-head-lbox{padding: 4px 10px 0 50px; }
    .app-head-r{flex:5; height:80px;}
    .app-head-rbox{display: flex; height: 100%; justify-content: center; align-items: center; padding-left: 20px; }
    .app-hr-item{flex:1; }
    .percentbox{border:1px solid #E4393C; float:left; width:60%; height: 14px; margin-top: 2px; margin-left: 10px; }
    .percentbg{height:100%;background:#E4393C; }
    .app-hr-text{float:left}
    .appr-filter{width:100%; height:30px; border: 1px solid #f5f5f5; background-color: #fafafa; }
    .appr-filterbox{width: 100%; height: 100%; background: #f5f5f5;}
    .appr-filterbox li{float: left; padding:5px 10px; }
    .appr-filterbox li .curr{background: #fafafa; color: #e4393c; font-weight: bold;} i{font-style: normal; }
    .apprimg{width:25px !important; height:25px; border-radius:50%; float:left }
    .rating {
        color: #999;
        font-size: 12px
    }
    .rating .fa-star {
        color: #FC0
    }
    .userinfo{width: 100%;height: 26px;}
    .appraises-box{width:960px; border-bottom:1px solid #eee; margin:5px 0; padding:0 5px; }
    .mall-appraises-left{width:84%;height:100%;float:left; }
    .app-content{margin:10px 0; }
    .mall-appraises-right{width:150px;height:100%;float:left; }
    .goods-spec-box{width: 100%; height: 100%; }
    .appraiser{height:100%;float:left;padding-left: 5px; }
    .reply-content{line-height:15px; width:100%; border-top:1px solid #eee; padding-top:10px; color:orange; float:left; margin-bottom: 10px; }
    .reply-time{float:left; color: #999; padding-bottom:10px; }
    .reply-content>a{color:orange; }
    .reply-box{width:100%; max-height:110px; position:relative; margin-bottom:5px; }
    .goods-desc-box img{display: block;}
    /* 商品咨询 */
    .c999{color:#ccc; }
    .consult-searchbox{padding:17px 0 0 43px; }
    .search-tips{color: #999; padding-bottom: 10px; }
    .search-text {float: left; width: 449px; height: 28px !important; border: 1px solid #ccc !important; border-right: none; font: 12px/34px simsun; color: #999; padding: 0 10px; }
    .csbtn{float: left; width: 82px; height: 34px; background: #e4393c; border: none; line-height: 1; color: #fff; font-family: "Microsoft YaHei"; font-size: 16px; cursor: pointer; }
    .consult-list{padding: 0 15px 0 43px; }
    .cs-content{width: 75%; }
    .mall{padding:15px 0 7px; }
    .answer{color:#ff6500;padding-bottom: 15px;}
    .consult-item{font: 12px/18px simsun;border-bottom: 1px dotted #eee;}
    .consult-publish{height:300px;border:1px solid red;margin-top:20px;border-width: 2px 1px 1px;border-color: #999 #dedede #dedede;border-style: solid;}
    .consult-publish h5{height: 30px;line-height: 30px;font-size: 14px;font-family: '\5fae\8f6f\96c5\9ed1';padding-left: 10px;}
    .explain,.consult-publish ul{padding: 10px 20px;}
    .consult-publish ul li{margin-bottom: 5px;line-height: 25px;}
    .fbold{font-weight: bold;vertical-align: top;}
    #consultContent{ width: 500px;height: 100px;}
    #consultCommit{display: inline-block;width: 72px;height: 29px;margin-left: 62px;vertical-align: middle;background:#e54043;border:none;color:#fff;cursor: pointer;}
    button:focus {outline: none;}
    .mall-clear{clear:both}
</style>
{/block}

{block name="body"}
<body class="product-page">
{/block}

{block name="main"}
<!-- Breadcrumbs -->
  <div class="breadcrumbs">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <ul>
            <li class="home"> <a title="{:__('Go to Home Page')}" href="{:addon_url('mall')}">{:__('Home')}</a></li>
              <li>
                  <span>&raquo;</span>
                  <a href='{:addon_url("mall/cat/index",["id"=>$goods["goodscat_ids"]])}'>{$goods['goodscat_ids_text']}</a>
              </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- Breadcrumbs End --> 

  <!-- Main Container -->
  <div class="main-container col2-left-layout">
    <div class="container">
      <div class="row">
          <div class="col-main col-sm-9 col-xs-12">
              <div class="product-view-area">
                <div class="product-big-image col-xs-12 col-sm-5 col-lg-5 col-md-5">
                    {if $goods['goodsstatus']}<div class="icon-sale-label sale-left">{:__("Sale")}</div>{/if}
                    <div class="large-image">
                        <a href="{$goods['goodsimg']}" class="cloud-zoom" id="zoom1" rel="useWrapper: false, adjustY:0, adjustX:20">
                            <img class="zoom-img" src="{$goods['goodsimg']}" alt="{$goods['goodsname']}">
                        </a>
                    </div>
                    <div class="flexslider flexslider-thumb">
                      <ul class="previews-list slides">
                          {volist name="$goods['gallery']" id='vo'}
                            <li>
                                <a href='{$vo}' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '{$vo}' ">
                                    <img src="{$vo}" alt = "{$goods['goodsname']}"/>
                                </a>
                            </li>
                          {/volist}
                      </ul>
                    </div>

                <div class="product-cart-option">
                  <ul>
                      <li>
                          {if ($goods['favGood']>0)}
                            <a href='javascript:void(0);' onclick='cancelFavorite(this,"goods",{$goods["id"]},{$goods["favGood"]})'><i class="fa fa-heart"></i><span>{:__("Favourited")}</span></a>
                          {else}
                            <a href='javascript:void(0);' onclick='addFavorite(this,"goods",{$goods["id"]})' ><i class="fa fa-heart-o"></i><span>{:__("Favourite")}</span></a>
                          {/if}
                      </li>
                      <li>
                          <a href="javascript:void(0);" onclick="javascript:contrastGoods(1,{$goods['id']},1)"><i class="fa fa-retweet"></i><span>{:__("Compare")}</span></a>
                      </li>
                      <li>
                          <a href="/user/mall/oper/inform/add?ref=addtabs&goods_id={$goods['id']}" ><i class="fa fa-shield"></i><span>{:__("Inform")}</span></a>
                      </li>
                  </ul>
                </div>

              </div>
                <div class="col-xs-12 col-sm-7 col-lg-7 col-md-7 product-details-area">

                      <div class="product-name">
                        <h1>{$goods['goodsname']}</h1>
                      </div>
                      <div class="price-box">
                        <p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> ￥{$goods['shopprice']} </span> </p>
                        <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price"> ￥{$goods['marketprice']} </span> </p>
                      </div>
                      <div class="ratings">评分:
                        <div class="rating">
                            {for start="0" end="$goods['raty']['totalScore']"}
                                <i class="fa fa-star"></i>
                            {/for}
                            {for start="1" end="6-$goods['raty']['totalScore']"}
                                <i class="fa fa-star-o"></i>
                            {/for}
                        </div>
                        <p class="rating-links">  {:__("Review")}:<span>  {$goods['appraisenum']}</span> </p>
                        <p class="availability in-stock pull-right">{:__("Salenum")}: <span>  {$goods['salenum']}</span>{$goods['goodsunit']} </p>
                      </div>
                      <div class="short-description">
                        <p> {$goods['goodstips']}</p>
                      </div>
                      <div class="short-description">
                          <p> 服务提供:
                              <a target='_blank' href="{:addon_url('mall/shop/detail',array('ids'=>$goods['shop']['id']))}">{$goods['shop']['name']}</a>
                          </p>
                      </div>
                      {if !empty($goods['spec'])}
                      <div class="product-color-size-area">
                          {volist name="$goods['spec']" id='vo'}
                            <div class="size-area">
                              <h2 class="saider-bar-title">{$vo['name']}</h2>
                              <div class="size">
                                <ul>
                                    {volist name="$vo['list']" id='vo2'}
                                    {if $vo2['itemimg']!=''}
                                      <li class='j-option img' data-val="{$vo2['itemId']}" style='width:30px;height:30px;padding:0px;'>
                                          <img class="cloudzoom-gallery" width="28" height="26"
                                               src="__MALLCDN__{$vo2['itemimg']}"
                                               data-cloudzoom="useZoom: '.cloudzoom',
                                               image:'__MALLCDN__{$vo2['itemimg']}',
                                               zoomImage:'__MALLCDN__{$vo2['itemimg']}' "
                                               title="{$vo2['itemname']}" alt="{$vo2['itemname']}"/><i></i>
                                      </li>
                                    {else}
                                      <li class='j-option' data-val="{$vo2['itemId']}">{$vo2['itemname']}<i></i></li>
                                    {/if}
                                    {/volist}
                                </ul>
                              </div>
                            </div>
                          {/volist}
                      </div>
                      {/if}
                      <div class="product-variation">
                        <form action="#" method="post">
                            <div class="cart-qty">
                                <div class="cart-plus-minus">
                                    <label for="qty">{:__("Qty")}:</label>
                                    <div class="numbers-row">
                                        <div onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 0 ) result.value--;return false;" class="dec qtybutton"><i class="fa fa-minus">&nbsp;</i></div>
                                        <input type="text" class="qty" title="Qty" value="1" maxlength="12" id="qty" name="qty">
                                        <div onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="inc qtybutton"><i class="fa fa-plus">&nbsp;</i></div>
                                    </div>
                                </div>
                                <div class="availability in-stock pull-right">{:__("Stock")}: <span>{$goods['goodsstock']}</span>{$goods['goodsunit']}</div>
                            </div>
                            <div class="cart-buttons">
                                <button onclick="javascript:addSpecCart(0,'#qty')" class="button pro-add-to-cart" title="{:__('Add to Cart')}" type="button"><span><i class="fa fa-shopping-cart"></i> {:__('Add to Cart')}</span></button>
                                <button onclick="javascript:addSpecCart(1,'#qty')" class="button pro-shop-now pull-right" title="{:__('Shop now')}" type="button"><span><i class="fa fa-money"></i> {:__('Shop now')}</span></button>
                            </div>
                        </form>
                      </div>
                      <div class="product-cart-option">
                        <ul>
                            <li class="social-network fb"><a title="{:__('Share to %s',__('Wechat'))}" target="_blank" href="https://www.facebook.com/"><i class="fa fa-wechat"></i></a></li>
                            <li class="social-network googleplus"><a title="{:__('Share to %s',__('Alipay'))}" target="_blank" href="https://plus.google.com/"><i class="fa icon iconfont iconfont-alipay"><span class="icon iconfont icon-alipay"></span></i></a></li>
                            <li class="social-network tw"><a title="{:__('Share to %s',__('QQ'))}" target="_blank" href="https://twitter.com/"><i class="fa fa-qq"></i></a></li>
                            <li class="social-network linkedin"><a title="{:__('Share to %s',__('Weibo'))}" target="_blank" href="https://www.pinterest.com/"><i class="fa fa-weibo"></i></a></li>
                            <li class="social-network instagram"><a title="{:__('Share to %s',__('Baidu'))}" target="_blank" href="https://instagram.com/"><i class="fa"><span class="icon iconfont icon-baidu"></span></i></a></li>
                            <li class="social-network rss"><a title="{:__('Share to %s',__('Github'))}" target="_blank" href="https://instagram.com/"><i class="fa"><span class="icon iconfont icon-github"></span></i></a></li>
                            <li class="social-network linkedin"><a title="{:__('Share to %s',__('Jingdong'))}" target="_blank" href="https://instagram.com/"><i class="fa"><span class="icon iconfont icon-jingdong"></span></i></a></li>
                        </ul>
                      </div>
                  </div>
              </div>

              <div class="product-overview-tab">
                <div class="product-tab-inner">
                  <ul id="product-detail-tab" class="nav nav-tabs product-tabs">
                    <li class="active"> <a href="#description" data-toggle="tab"> {:__("Description")} </a> </li>
                    <li> <a href="#reviews" data-toggle="tab">{:__("Review")}</a></li>
                    <li> <a href="#consult" data-toggle="tab">{:__("Consult")}</a> </li>
                  </ul>

                  <div id="productTabContent" class="tab-content">
                      <!--详情页-->
                      <div class="tab-pane fade in active" id="description">
                          <div class="std">
                              {if(isset($goods['brandName']) && $goods['brandName']!='')}
                              <div class="product-name">品牌：<span>{$goods['brandName']}</span></div>
                              {/if}
                              {if($goods['attrs'])}
                                  <ul>
                                      {volist name="$goods['attrs']" id="vo"}
                                        <li title='{$vo["attrval"]}'>{$vo['attrname']}：{$vo['attrval']}</li>
                                      {/volist}
                                  </ul>
                              {/if}
                              {$goods['goodsdesc']|htmlspecialchars_decode}
                          </div>
                      </div>
                      <!--评价页-->
                      <input type="hidden" id="filtertype" value="all" />
                      <div id="reviews" class="tab-pane fade">
                          <div class="appraise-head">
                              <div class="app-head-l">
                                  <div class="app-head-lbox">
                                        <strong class="text">好评度</strong>
                                        <div class='percent'>
                                            <i class="best_percent">0</i><span>%</span>
                                        </div>
                                    </div>
                              </div>
                              <div class="app-head-r">
                                    <div class="app-head-rbox">
                                        <div class="app-hr-item">
                                            <div class="app-hr-text">好评(<i class="best_percent">0</i>%)</div>
                                            <div class="percentbox">
                                                <div class="percentbg" id="best_percentbg" style="width:0%"></div>
                                            </div>
                                        </div>
                                        <div class="app-hr-item">
                                            <div class="app-hr-text">中评(<i class="good_percent">0</i>%)</div>
                                            <div class="percentbox">
                                                <div class="percentbg" id="good_percentbg" style="width:0%"></div>
                                            </div>
                                        </div>
                                        <div class="app-hr-item">
                                            <div class="app-hr-text">差评(<i class="bad_percent">0</i>%)</div>
                                            <div class="percentbox">
                                                <div class="percentbg" id="bad_percentbg" style="width:0%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                          </div>
                          <!--评价项容器-->
                          <div id='ga-box'></div>
                          <!--分页容器-->
                          <div class="pagination-area"></div>
                      </div>
                      <!--咨询页-->
                      <div class="tab-pane fade" id="consult">
                          <div class="appr-filter">
                              <input type='hidden' id="consultType" value="0" />
                              <ul class="appr-filterbox list-unstyled">
                                  <li><a class="gc-filter curr" href="javascript:void(0)" onclick="consultfilter(this,'0')">全部</a></li>
                                  {volist name="consultType" id="vo"}
                                  <li><a class="gc-filter" href="javascript:void(0)" onclick="consultfilter(this,'{$key}')">{$vo}</a></li>
                                  {/volist}
                              </ul>
                          </div>
                          <div class="consult-searchbox">
                              <p class="search-tips">温馨提示：因每位咨询者购买情况、咨询时间等不同，以下回复对咨询者3天内有效，其他网友仅供参考。</p>
                              <div class="searchout">
                                  <input type="text" class="search-text" id="consultKey" placeholder="请输入关键词" />
                                  <button class="csbtn" onclick="queryConsult(0)">搜索</button>
                              </div>
                          </div>
                          <div class="mall-clear"></div>
                          <div class="consult-listbox" id="consultBox"></div>
                          <div id="consult-pager" style="text-align:right;margin-top:10px;"></div>

                          {/* 提交新咨询 */}
                          <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="/user/mall/goods/consult/add">
                              <input id="c-goods_id" name="row[goods_id]" type="hidden" value="{$goods['id']}">
                              <input id="c-user_id" name="row[user_id]" type="hidden" value="{:cookie('uid')}">
                              <input id="c-showis" name="row[showis]" type="hidden" value="0">
                              <input id="c-status" name="row[status]" type="hidden" value="normal">
                              <div class="consult-publish">
                                  <h5>发表新咨询</h5>
                                  <div class="explain">
                                      声明：您可在购买前对产品包装、颜色、运输、库存等方面进行咨询，我们有专人进行回复！因厂家随时会更改一些产品的包装、颜色、产地等参数，所以该回复仅在当时对提问者有效，其他网友仅供参考！咨询回复的工作时间为：周一至周五，9:00至18:00，请耐心等待工作人员回复。
                                  </div>
                                  <div class="form-group">
                                      <label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
                                      <div class="col-xs-12 col-sm-8">
                                          <div class="radio">
                                              {foreach name="consultType" item="vo"}
                                              <label for="row[type]-{$key}"><input id="row[type]-{$key}" name="row[type]" type="radio" value="{$key}" {in name="key" value="1"}checked{/in}/> {$vo}</label>
                                              {/foreach}
                                          </div>
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
                                      <div class="col-xs-12 col-sm-8">
                                          <textarea id="c-content" data-rule="required" class="form-control" name="row[content]" type="text" rows="3" placeholder='3~200个字符长度' minlength='3' maxlength='200'></textarea>
                                      </div>
                                  </div>
                                  <div class="form-group layer-footer">
                                      <label class="control-label col-xs-12 col-sm-2"></label>
                                      <div class="col-xs-12 col-sm-8">
                                          <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                                          <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                                      </div>
                                  </div>
                              </div>
                          </form>
                      </div>
                  </div>
                </div>
              </div>
          </div>

          <aside class="right sidebar col-sm-3 col-xs-12">
              {include file="layout/sidebar"}
          </aside>
        
      </div>
    </div>
  </div>
  <!-- Main Container End -->

    <!-- Related Product Slider -->
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="related-product-area">
                    <div class="page-header">
                        <h2>相关产品</h2>
                      </div>
                    <div class="related-products-pro">
                            <div class="slider-items-products">
                              <div id="related-product-slider" class="product-flexslider hidden-buttons">
                                <div class="slider-items slider-width-col4 fadeInUp">
                                    {mall:goods type='recom' cat=$goods['goodscat_ids'] cache="86400" num='6' id='vo'}
                                    {include file="layout/item"}
                                    {/mall:goods}
                                </div>
                              </div>
                            </div></div>

                </div>
            </div>
        </div>
    </div>
    <!-- Related Product Slider End -->

    <!-- Upsell Product Slider -->
    <section class="upsell-product-area">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="page-header">
                        <h2>猜您喜欢</h2>
                    </div>
                    <div class="slider-items-products">
                      <div id="upsell-product-slider" class="product-flexslider hidden-buttons">
                        <div class="slider-items slider-width-col4">
                            {mall:goods type='guess'cache="86400" num='6' id='vo'}
                            {include file="layout/item"}
                            {/mall:goods}
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
  </section>
    <!-- Upsell Product Slider End -->

<!-- 评价项模板 -->
<script id="appraisetpl" type="text/html">
    <div class="appr-filter">
        <ul class="appr-filterbox list-unstyled">
            <li><a href="javascript:void(0)" onclick="apprfilter('all')" id='all'>全部评价(<span id="totalNum">0</span>)</a></li>
            <li><a href="javascript:void(0)" onclick="apprfilter('pic')" id='pic'>晒图(<span id="picNum">0</span>)</a></li>
            <li><a href="javascript:void(0)" onclick="apprfilter('best')" id='best'>好评(<span id="bestNum">0</span>)</a></li>
            <li><a href="javascript:void(0)" onclick="apprfilter('good')" id='good'>中评(<span id="goodNum">0</span>)</a></li>
            <li><a href="javascript:void(0)" onclick="apprfilter('bad')" id='bad'>差评(<span id="badNum">0</span>)</a></li>
        </ul>
    </div>
    <%if(data && data.length>0){%>
    <%for(var i = 0; i < data.length; i++){%>
    <div class="appraises-box">
        <div class="mall-appraises-right">
            <div class="userinfo">
                <img src="<%if(data[i]['avatar'] != null){%><%=data[i]['avatar']%><%}%>" class="apprimg" />
                <div class="appraiser">
                    <%=data[i]['loginName']%>
                </div>
            </div>
            <p><%=data[i].rankName?data[i].rankName:''%></p>
        </div>
        <div class="mall-appraises-left">
            <div class="rating">
                <%for(var j=1;j<6;++j){%>
                    <%if(j<=data[i]['avgScore'])%>
                        <i class="fa fa-star"></i>
                    <%else%>
                        <i class="fa fa-star-o"></i>
                <%}%>
            </div>
            <div class='mall-clear'></div>
            <p class="app-content">
                <%=data[i]['content']%>
            <div class="goods-spec-box">
                <%=data[i]['goodsSpecNames']%>
            </div>
            </p>
            <%if(typeof(data[i]['receivimg'])=='null'){var img = data[i]['receivimg'].split(','); var length = img.length;%>
            <div id="img-file-<%i%>">
                <%for(var g=0;g<length;g++){%>
                <img src="__MALLCDN__<%=img[g]%>" layer-src="__MALLCDN__<%=img[g]%>" style="width:80px;height:80px;" />
                <%}%>
            </div>
            <%}%>
            <span class="apprtime"><%=data[i]['createtime']%></span>
            <%if(data[i]['reply']!='' && data[i]['reply']!=null){%>
            <div class="reply-box">
                <p class="reply-content"><a href="/addons/mall/shop/detail/ids/<%=data[i]['shop_id']%>" ><%=data[i]['name']%></a>：<%=data[i]['reply']%></p>
                <p class="reply-time"><%=data[i]['replytime']%></p>
            </div>
            <%}%>
        </div>
        <div class="mall-clear"></div>
    </div>
    <%}%>
    <%}else{%>
    <div class="appraises-box">
        <div class="mall-appraises-left">
            没有记录！
        </div>
    </div>
    <%}%>
</script>
<!-- 咨询项模板 -->
<script id="consulttpl" type="text/html">
    <ul class='consult-list'>
        <% for(var i=0;i<data.length;++i){  %>
        <li>
            <ul class="consult-item">
                {/* 提问 */}
                <li class='ask'>
                    <p class="mall-lfloat">咨询内容：</p>
                    <div class="mall-lfloat cs-content"><%=data[i]['content']%>&nbsp;<span class="c999">(<%=(typeof(data[i]['loginName'])=='')?'游客':data[i]['loginName']%>)</span></div>
                    <div class="mall-rfloat"><%=data[i]['createtime']%></div>
                    <div class="mall-clear"></div>
                </li>
                {/* 回复 */}
                <% if(data[i]['reply']!=''){  %>
                <li class='answer'>
                    <p class="mall-lfloat">商家回复：</p>
                    <div class="mall-lfloat cs-content">
                        <%=data[i]['reply']%>
                    </div>
                    <div class="mall-rfloat"><%=data[i]['replytime']%></div>
                    <div class="mall-clear"></div>
                </li>
                <% }  %>

            </ul>
        </li>
        <% }  %>
    </ul>
</script>

{/block}

{block name="js"}
{__block__}
<script type="text/javascript" src="__ADDON__/__STYLE__/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="__ADDON__/__STYLE__/js/countdown.js"></script>
<script type="text/javascript" src="__ADDON__/__STYLE__/js/cloud-zoom.js"></script>

<script type="text/javascript">
    var userId = {$user.id ? $user.id : 0};
    var goodsInfo = {
        id:{$goods['id']},
        specis:{$goods['specis']},
        goodsstock:{$goods['goodsstock']},
        marketPrice:"{$goods['marketprice']}",
        goodsPrice:"{$goods['shopprice']}"
        {if isset($goods['saleSpec'])}
        ,sku:{:json_encode($goods['saleSpec'])}
        {/if}
    };

    $(function(){
        //设置规格默认选项值
        if(goodsInfo.sku){
            var specs,dv;
            for(var key in goodsInfo.sku){
                if(goodsInfo.sku[key].defaultis==1){
                    specs = key.split(':');
                    $('.j-option').each(function(){
                        dv = $(this).attr('data-val')
                        if($.inArray(dv,specs)>-1){
                            $(this).addClass('j-selected');
                        }
                    })
                    $('#qcy').attr('data-max',goodsInfo.sku[key].specstock);
                }
            }
        }else{
            $('#qcy').attr('data-max',goodsInfo.goodsstock);
        }
        checkGoodsStock();

        //选择规格
        $('.j-option').click(function(){
            $(this).addClass('j-selected').siblings().removeClass('j-selected');
            checkGoodsStock();
        });

    });

    /**
    *检查商品库存
    */
    function checkGoodsStock(){
        var specIds = [],stock = 0,goodsPrice=0,marketPrice=0;
        if(goodsInfo.specis==1){
            $('.j-selected').each(function(){
                specIds.push(parseInt($(this).attr('data-val'),10));
            });
            //specIds.sort(function(a,b){return a-b;});
            if(goodsInfo.sku[specIds.join(':')]){
                stock = goodsInfo.sku[specIds.join(':')].specStock;
                marketPrice = goodsInfo.sku[specIds.join(':')].marketPrice;
                goodsPrice = goodsInfo.sku[specIds.join(':')].specPrice;
            }
        }else{
            stock = goodsInfo.goodsStock;
            marketPrice = goodsInfo.marketPrice;
            goodsPrice = goodsInfo.goodsPrice;
        }
        var iptv = parseInt($('#num').val(),10);
        iptv = (iptv>stock)?stock:iptv;
        $('#num').val(iptv);
        $('#num').attr('data-max',stock);
        $('#goods-stock').html(stock);
        $('#j-market-price').html('￥'+marketPrice);
        $('#j-shop-price').html(goodsPrice);
        if(stock<=0){
            $('.pro-add-to-cart').addClass('disabled');
            $('.pro-shop-now').addClass('disabled');
        }else{
            $('.pro-add-to-cart').removeClass('disabled');
            $('.pro-shop-now').removeClass('disabled');
        }
    }

    /**
     *添加到购物车,带商品规格和数量
     *@param int type 0=购物车表单 1=结算表单
     *@param int iptId 购买数量
     */
    function addSpecCart(type,iptId){
        var goodsspec_id = 0;
        if(goodsInfo.specis==1){
            var specIds = [];
            //获取已选择的销售规格
            $('.j-selected').each(function(){
                specIds.push($(this).attr('data-val'));
            });
            if(specIds.length==0){
                Toastr.error('请选择你要购买的商品信息');
                //return false;
            }else{
                specIds.sort(function(a,b){return a-b});
                if(goodsInfo.sku[specIds.join(':')]){
                    goodsspec_id = goodsInfo.sku[specIds.join(':')].id;
                }
            }
        }
        var num = $(iptId)[0]?$(iptId).val():1;
        var add = userId>0 ? "add" : "addVisitor";
        $.ajax({
            url: '/addons/mall/cart/add',
            type: 'post',
            dataType: 'json',
            data: {goods_id:goodsInfo.id,goodsspec_id:goodsspec_id,num:num,type:type,rnd:Math.random()},
            success: function (ret) {
                if(ret.code){
                    Toastr.success(ret.msg,function(){
                        if(ret.data && ret.data.forward){
                            if(type==1) location.href='/addons/mall/order/' + add + '/num/' + num;
                            else location.href='/addons/mall/cart/'+ret.data.forward;
                        }else{
                            if(type==1) location.href='/addons/mall/order/' + add + '/num/' + num;
                        }
                        getCartInfo();
                    });
                }else{
                    Toastr.error(ret.msg);
                }
            },
        });
    }


    /****************** 商品评价 ******************/
    function apprfilter(type){
        $('.appr-filterbox li a').removeClass('curr');
        $('#filtertype').val(type);
        queryByPage(1);
    }

    var _first=true;

    function queryByPage(p) {
        var params = {};
        params.page = p;
        params.goodsId = goodsInfo.id;
        params.anonymous = 1;
        params.type = $('#filtertype').val();
        $.ajax({
            url: '/addons/mall/goods/getAppraiseByGoodsId',
            data: params,
            type: 'post',
            dataType: 'json',
            success: function (ret) {
                if (ret.code) {
                    var json = ret.data;
                    var Template = require('template');
                    $('#ga-box').html(Template("appraisetpl", json));
                    //  各评价数.
                    $('#totalNum').html(json.sum);
                    $('#bestNum').html(json.bestNum);
                    $('#goodNum').html(json.goodNum);
                    $('#badNum').html(json.badNum);
                    $('#picNum').html(json.picNum);
                    // 选中当前筛选条件
                    $('#' + params.type).addClass('curr');
                    if (_first && json.sum > 0) {
                        // 好、中、差评率
                        var best = parseInt(json.bestNum / json.sum * 100);
                        var good = parseInt(json.goodNum / json.sum * 100);
                        var bad = 100 - best - good;
                        $('.best_percent').html(best);
                        $('.good_percent').html(good);
                        $('.bad_percent').html(bad);
                        // 背景色
                        $('#best_percentbg').css({width: best + '%'});
                        $('#good_percentbg').css({width: good + '%'});
                        $('#bad_percentbg').css({width: bad + '%'});
                        _first = false;
                    }
                    //调用并渲染数据中传递的分页元素
                    $(".pagination-area").html(json.pagination);
                } else {
                    $('#ga-box').empty();
                }
            }
        });
    }

    $('#product-detail-tab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    /******************* 商品咨询 ********************/

// 提交商品咨询
    function queryConsult(p){
        var params = {};
        params.page = p;
        params.goods_id = goodsInfo.id;
        params.type = $('#consultType').val();
        params.consultKey = $('#consultKey').val();
        $.ajax({
            url: '/addons/mall/goods/getConsultByGoodsId',
            type: 'post',
            dataType: 'json',
            data: params,
            success: function (ret) {
                if(ret.code){
                    var json = ret.data;
                    var Template = require('template');
                    $('#consultBox').html(Template("consulttpl", json));
                    //调用并渲染数据中传递的分页元素
                    $("#consult-pager").html(json.pagination);
                }else{
                    if(ret.msg) Toastr.error(ret.msg);
                }
            },
        });
    }
    //筛选咨询类别
    function consultfilter(obj, type){
        $('.gc-filter').each(function(k,v){
            $(v).removeClass('curr');
        })
        $(obj).addClass('curr');
        $('#consultType').val(type);
        queryConsult(0);
    }

</script>

{/block}

